<template>
  <div>
    <h1>Vue框架</h1>
    <h3>（11）MOedl模型json数据的设计</h3>
    <h3>说明: 掌握一种能力: 针对页面中的所有内容设计json数据</h3>
    <h3>（12）Vue对象(this)会代理它的data中的所有属性</h3>
    <h3>说明：data返回的数据可以理解为Vue对象自己的数据。</h3>
    <h3>(13)事件修饰符： 在事件触发的基础之上点（添加新的功能）。</h3>
    <h3>（14)数组的变异方法: 添加， 删除的方法</h3>

    <div>
        名字: <input type="text" v-model="person.name"> <br>
        年龄: <input type="text" v-model="person.age"> <br>
        <button @click="m">按钮</button> <!--@click.once="m" 触发一次就失效-->
    </div>

    <div>
        <input type="text" @keyup.enter="m">
    </div>

    <div>
        {{arr}}
        <button @click="m2">数组的变异方法</button>
    </div>

  </div>
  
</template>

<script>
export default {
   name:"M",
   data(){
    return {
        person:{name:"hongyi", age:12},
        arr:['弘一', 'hongyi']
    }
   },
   methods: {
    m() {
        // 在控制台打印当前age 
        console.log(this.person.age);
        console.log(this.person.name);
    },
    m2(){  // 数组中常用的方法
        // 添加方法(往后添加)
        // this.arr.push("小明")
        // 往前添加
        // this.arr.unshift("若泽")
        // 删除方法前面删
        // this.arr.shift(1)
        // 删除方法后面删除
        // this.arr.pop(1)
    }
   },
}
</script>

<style>

</style>